<!-- Vue template -->
<script lang="ts" setup>
import { useOrganization } from "./hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import EditPen from "@iconify-icons/ri/logout-box-r-line";
import Search from "@iconify-icons/ep/search";
import UploadCloud from "@iconify-icons/ri/upload-cloud-2-line";
const {
  rules,
  result,
  columns,
  dataList,
  classList,
  loading,
  formRef,
  pagination,
  userList,
  planList,
  deriveXlsx,
  onSearch,
  Stubim_All,
  handleSizeChange,
  handleCurrentChange
} = useOrganization();
</script>
<template>
  <div class="main">
    <el-form ref="formRef" :inline="true" :model="result" :rules="rules" class="bg-bg_color w-[99/100] pt-4 pb-4 pl-4">

      <el-form-item label="计划名称" prop="planId">
        <el-select style="width: 180px" placeholder="请选择" filterable v-model="result.planId">
          <el-option v-for="plan in planList" :key="plan.planId" :label="plan.planName" :value="plan.planId" />
        </el-select>
      </el-form-item>
      <el-form-item label="班级名称" prop="classId">
        <el-select style="width: 180px" placeholder="请选择" filterable v-model="result.classId">
          <el-option v-for="time in classList" :key="time.key" :label="time.value" :value="time.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="用户名称">
        <el-select style="width: 180px" placeholder="请选择" clearable filterable v-model="result.userId">
          <el-option v-for="plan in userList" :key="plan.key" :label="plan.value" :value="plan.key" />
        </el-select>
      </el-form-item>
      <el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch(formRef)">
        搜索
      </el-button>
      <el-button type="primary" :icon="useRenderIcon(UploadCloud)" @click="Stubim_All(formRef)">
        一键提交
      </el-button>
      <el-button type="primary" :icon="useRenderIcon(EditPen)" @click="deriveXlsx(formRef)">
        导出
      </el-button>
    </el-form>
    <PureTableBar title="个人成绩查询" @refresh="onSearch" class="h100-60">
      <!-- <template #buttons>

          </template> -->
      <template v-slot="{ size, checkList }">
        <pure-table border id="XLSX_table" align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading"
          :size="size" :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </template>
    </PureTableBar>
  </div>
</template>
<!-- lang="ts" -->

<style lang="scss" scoped>
:deep(.el-form-item) {
  margin-bottom: 0;
}
</style>
